<template>
    <div class="stat-box">
        <Card1 v-for="item in stat" :key="item.id" :title="item.text" :subTitle="item.value" :icon="item.icon"></Card1>
    </div>
</template>

<script setup>
import Card1 from '@/components/card/Card1.vue';

const stat = [
    {
        id: 1,
        text: '项目数',
        value: 10,
        icon: '/icon/total-project.svg'
    },
    {
        id: 2,
        text: '活跃项目数',
        value: 2,
        icon: '/icon/active-project.svg'
    },
    {
        id: 3,
        text: '已完成项目数',
        value: 5,
        icon: '/icon/complete-project.svg'
    },
];
</script>

<style scoped lang="less">
.stat-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
}
</style>